<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F0F2F6;
        }
        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }
        #editForm{
            padding: 30px;
        }
        .page-main{
            background: #ffffff;
            height: 80%;
        }
        .tips{
            background-color: rgb(253, 246, 236);
            color: rgb(230, 162, 60);
            margin: 0px 5%;
            padding: 10px 0;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor" style="display: none">
    <div class="page-main">
         <p class="tips">
            <template v-if="flag=='all'"><span style="font-weight: bold">收件箱</span><span>(共有{{param.totalCount}}条，<a   @click="seo_Unread" style="color:#0081ff;text-decoration: underline ">只看未读</a>)</span></template>
             <template v-if="flag=='unread'"><span style="font-weight: bold">收件箱</span><span>未读邮件{{param.totalCount}}条<a @click="seo_All" style="color:#0081ff;text-decoration: underline ">返回</a></span></template>

         </p>
        <el-table
                :data="tableData.filter(data => !search || data.title.toLowerCase().includes(search.toLowerCase()))"
                style="width: 90%;margin: 0 5%;height: 600px" >
            <el-table-column
                    label="标题"
                    prop="bbsTitle">
                <template slot-scope="scope">
                    <span style="color:#0081ff;font-size: 16px">{{ scope.row.bbsTitle }}</span>
                    <template v-if="scope.row.flag==1">
                       <el-tag size="medium" type="success">已阅</el-tag>
                    </template>
                    <template v-if="scope.row.flag==0">
                        <a @click="handRead(scope.row.Id)"><el-tag size="medium" type="info">未阅</el-tag></a>
                    </template>
                </template>
            </el-table-column>
            <el-table-column
                    width="200"
                    align="center">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="search"
                            size="mini"
                            placeholder="输入关键字搜索"/>
                </template>
                <template slot-scope="scope">
                    <el-button
                            type="primary"
                            size="mini"
                            @click="showDetail(scope.row)">明细</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="page-footer">
            <el-pagination background layout="prev, pager, next" :pagesize="param.pagesize" :total="param.totalCount" :current-page.sync="param.pageno" @current-change="onChangePage">
            </el-pagination>
        </div>

    </div>

</div>
<script type="text/javascript" src="release/wangEditor.js"></script>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            param:{
              pagesize:10,
              pageno:1,
              totalCount:10,
                UserId:SiteConfig.account.id,
                flag:'',
            },
            tableData: [],
            search: '',
            flag:'all',
        },
        methods: {
            readChange(){

            },
            onChangePage(page){
             this.param.pageno = page;
             this.getBbs();
            },
            seo_All(){
                this.flag = 'all'
               this.param.flag = '';
               this.getBbs();
            },
            seo_Unread(){
                this.flag = 'unread'
                this.param.flag = 0;
                this.getBbs();
            },
            handRead(Id){
                HttpUtil.get('CompanyBbs/BbsLoad',{Id:Id,flag:1}).success((r)=>{
                       this.getBbs();
                })
            },
            showDetail(row){
                if (row.flag==0){
                    HttpUtil.get('CompanyBbs/BbsLoad',{Id:row.Id,flag:1}).success((r)=>{
                        window.open('notice-detail.html?bbsId='+row.BbsId);
                    })
                }else {
                    window.open('notice-detail.html?bbsId='+row.BbsId);
                }

            },
            getBbs(){
               HttpUtil.get('CompanyBbs/userBbsList',this.param).success((r)=>{
                         this.tableData = r.data;
                         this.param.totalCount = r.total;
               })
            }
        },
        created: function () {
            $('.page').show();

        },
        mounted: function () {
            this.getBbs();
        }
    });


</script>

</body>
</html>
